<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">

<title>商品详情</title>

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="/market/css/details.css">

</head>

<body>

	<%@include file="navbar.jsp"%>
	<script type="text/javascript">
        //收藏
        function confirmColl(uid,gid){
            if (!confirm("确定收藏")) {
                window.event.returnValue = false;
            }  else{
                //删除userid='+uid+'&
                window.location.href='AddCollection?goods_id='+gid;
            }
        }
        //购买
        function confirmBuy(){
            alert("请与商家联系相关事宜，线下交易！")
        }

	</script>

	<%if(request.getAttribute("col_msg")!=null){
	    %>
	<script type="text/javascript"> alert(request.getAttribute("col_msg"))</script>
	<%
	}%>

	<!-- 左右分布 -->
	<div class="container col-center-block ">
		<div class="row" >
			<%--左边商品详情--%>
			<div class="col-md-8 col-sm-8 col-xs-12" style="margin-top: 80px;">

				<div class="row " >
					<div class="col-md-offset-1 col-sm-6 col-xs-10" style="padding-top: 10px">
						<c:if test="${goods_details.goods_img.substring(0,1) eq '/'}">
							<img  class=" img-responsive " alt="detail_img_left"
								  src="${goods_details.goods_img}" width="350px" height="350px">
						</c:if>

						<c:if test="${goods_details.goods_img.substring(0,1) ne '/'}">
							<img src="showGoodsPic?goodsImg=${goods_details.goods_img}&userid=${goods_details.user.userid}"
								 class=" img-responsive " alt="detail_img_left" width="350px" height="350px">
						</c:if>

					</div>

					<div class=" col-sm-5 col-xs-12 ">
						<table class="table" border="0">
							<h3 class="title_font">${goods_details.goods_name}</h3>
							<tr>
								<td>价格: <span class="price_font">¥${goods_details.goods_price}</span></td>
							</tr>
							<tr>
								<td style="border: none;">成色: <span class="infos_font">${goods_details.oldLevel.old_des}</span></td>
							</tr>
							<tr>
								<td style="border: none;">地址：<span  class="infos_font">${goods_details.trade_place}</span></td>
							</tr>
							<tr>
								<td style="border: none;">联系人：<span class="infos_font">${goods_details.contact_name}</span></td>
							</tr>

							<tr>
								<td style="border: none;">QQ号：<span class="infos_font">${goods_details.qq_number}</span></td>
							</tr>
							<tr>
								<td style="border: none;">手机号：<span class="infos_font">${goods_details.telephone}</span></td>
							</tr>
							<tr>
								<td style="border: none;">卖家：<span class="infos_font">
									<a href="Seller_Main?seller_id=${goods_details.user.userid}">
										${goods_details.user.nickname}</a></span></td>
							</tr>


							<tr>
								<td style="border: none;">
									<a class="btn btn-default" style="border-color: blue; margin-top: 10px;width: 40%"
									onclick="confirmBuy()">立即购买</a>
									<a class="btn btn-primary" style="margin-top: 10px; margin-left: 10px;width: 40%"
									   onclick="confirmColl(${goods_details.user.userid},${goods_details.goods_id})">
									   收藏</a>
								</td>
							</tr>
						</table>
					</div>

				</div>

			<!--  介绍  留言  -->
				<div class="row" style=" padding-top: 15px;">
					<div class="col-md-offset-1 col-sm-11 col-xs-12 ">

						<!-- tab标签 -->
						<ul id="myTab" class="nav nav-tabs">
							<li class="active" ><a href="#describe" data-toggle="tab">介绍</a></li>
							<li><a href="#evaluation" data-toggle="tab">评价</a></li>
							<li><a href="#msgBoard" data-toggle="tab">留言</a></li>
							<li>
						</ul>

						<!-- 每个tab页对应的内容 -->
						<div id="myTabContent" class="tab-content">
							<div class="tab-pane fade in active" id="describe">
								<br/>
								<c:if test="${goods_details.goods_img.substring(0,1) eq '/'}">
									<img alt="detail_tab_img" src="${goods_details.goods_img}" class="introduce_image">
								</c:if>

								<c:if test="${goods_details.goods_img.substring(0,1) ne '/'}">
									<img src="showGoodsPic?goodsImg=${goods_details.goods_img}&userid=${goods_details.user.userid}"
										 class=" introduce_image " alt="detail_tab_img" >
								</c:if>

								<p><span>${goods_details.goods_describe}</span></p>
							</div>
							<div class="tab-pane fade" id="evaluation">
								<br />
								<%@include file="evaluation.jsp"%>

							</div>
							<div class="tab-pane fade" id="msgBoard">
								<br />
								<%@include file="messageboard.jsp"%>
							</div>
						</div>
					</div>
				</div>
			</div><!-- /.col-lg-6 -->

			<%--右边商品推荐--%>
			<div class=" col-md-3 col-sm-3 col-xs-12" style="margin: 50px 0px 0px 20px">
				<h4 class="page-header"><b>同类推荐</b>
					<span style="padding-left: 10px">
					<a href="goods_type?typeId=${goods_details.type_id}"><small>查看更多....</small></a>
					</span>
				</h4>
				<c:forEach items="${goods_recommend}" var="goods">

					<div class="panel panel-default col-xs-5 col-sm-10 " style="margin-left: 21px">
						<div class="panel-body">

							<div class="row" >
								<a href="goods_details?goodsId=${goods.goods_id}">

									<c:if test="${goods.goods_img.substring(0,1) eq '/'}">
										<img class=" img-responsive " alt="img_detail" src="${goods.goods_img}"
											 style="width: 190px; height: 190px;">
									</c:if>

									<c:if test="${goods.goods_img.substring(0,1) ne '/'}">
										<img src="showGoodsPic?goodsImg=${goods.goods_img}&userid=${goods.user.userid}"
											 class=" img-responsive " alt="img_detail" style="width: 190px; height: 190px;">
									</c:if>


								</a>

								<p class="productPriceEm" >¥${goods.goods_price}</p>
								<p class="productFont"><small>${goods.goods_name}</small></p>
								<a>${goods.user.username}</a>
								<small style="margin-left: 1%">${goods.trade_place}</small>
							</div>

						</div>
					</div>

				</c:forEach>

			</div><!-- /.col-lg-6 -->
		</div><!-- /.row -->

	</div>
	
</body>
</html>